<template>
  <view class="my">
    <view class="my-top"></view>
    <view class="my-bottom">
      <view class="minxi">
        <text>支付明细</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="my-text">
        <text>问题反馈</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="my-text">
        <text>联系客服</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <button class="logout">退出登录</button>
    </view>
    <view class="my-flex">
      <view class="flex-top"
        ><image :src="img" mode="scaleToFill" class="tx" />
        <dl v-if="token == ''">
          <dt @click="gologin">未登录</dt>
          <dd></dd>
        </dl>
        <dl v-else>
          <dt>{{name}}</dt>
          <dd>{{username}}</dd>
        </dl>
        <u-icon
          @click="onIcon"
          name="email-fill"
          size="20"
          color="#35a1fe"
        ></u-icon>
        <u-badge max="99" value="123"></u-badge>
      </view>
      <view class="flex-bottom">
        <dl>
          <dt>
            <image
              src="http://10.31.71.56:7001/public/upload/fb.gif"
              mode="scaleToFill"
            />
          </dt>
          <dd>我的发布</dd>
        </dl>
        <dl>
          <dt>
            <image
              src="http://10.31.71.56:7001/public/upload/sc.gif"
              mode="scaleToFill"
            />
          </dt>
          <dd>收藏</dd>
        </dl>
        <dl>
          <dt>
            <image
              src="http://10.31.71.56:7001/public/upload/lis.png"
              mode="scaleToFill"
            />
          </dt>
          <dd>浏览历史</dd>
        </dl>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: uni.getStorageSync("name") || "",
      img: uni.getStorageSync("img") || "",
      username: uni.getStorageSync("username") || "",
      token: uni.getStorageSync("token") || "",
    };
  },
  methods: {
    gologin() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
    onIcon() {
      // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
      uni.switchTab({ url: "/pages/message/message" });
    },
  },
};
</script>

<style lang="scss">
.my {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #2593fa;
  .my-top {
    width: 100vw;
    height: 100px;
  }
  .my-bottom {
    width: 100vw;
    height: 100vh;
    background: #fff;
    border-radius: 150px / 20px 20px 0 0;
    position: relative;
    .minxi {
      padding-top: 100px;
      width: 100vw;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 5px #f5f7f6;
      text {
        padding: 0 20px;
      }
    }
    .my-text {
      width: 100vw;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 5px #f5f7f6;
      text {
        padding: 0 20px;
      }
    }
    .logout {
      width: 90vw;
      height: 50px;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      // border: none;
      left: 5vw;
      bottom: 10px;
      font-size: 12px;
      color: #fff;
      background: #ff656f;
    }
  }
  .my-flex {
    width: 90vw;
    height: 140px;
    background: #fff;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px #ccc;
    .flex-top {
      width: 90%;
      height: 70px;
      border-bottom: solid 1px #ccc;
      margin-left: 5%;
      display: flex;
      align-items: center;
      .tx {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .flex-bottom {
      display: flex;
      justify-content: space-around;
      dl {
        text-align: center;
        image {
          width: 30px;
          height: 30px;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
